import React, { Component } from 'react'
import { useLocation } from 'react-router'

// v6使用class组件, 需要封装一下, 利用hoc组件来获取参数，然后传递给class组件
function myWithRouter(Detail) {
    return (props) => {
        let location = useLocation();
        // 这里写成 location.state || {}, 因为state在刷新后可能为空，所以这里为空时设置为空对象
        const stateObj = location.state || {};
        const params = {
            id: stateObj.id,
            title: stateObj.title
        }
        return <Details_state {...props} params={params}/>
    }
}
const detailData = [
    { id: '01', content: 'Detail_state-1' },
    { id: '02', content: 'Detail_state-2' },
    { id: '03', content: 'Detail_state-3' }
];
class Details_state extends Component {
    render() {
        const { params: { id, title } } = this.props;
        // 未找到匹配的值时为空对象
        const res = detailData.find(detailDataObj => detailDataObj.id === id) || {};
        return (
            <div>
                <ul>
                    <li>ID:{id}</li>
                    <li>TITLE:{title}</li>
                    <li>CONTENT:{res.content}</li>
                </ul>
            </div>
        );
    }
}

export default myWithRouter(Details_state);